<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style>
	body{
		margin: 0;
		padding: 0;
		background-color: rgba(216,216,216,1.00)
	}
	body>div{
		width: 200px;
		height: 200px;
		background-color: green;
		color: white;
		float: left;
		margin: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.translateTest{
		transform: translate(50px,100px);
		
	}
	.scaleTest{
		transform: scale(.6);
		
	}
	.rotateTest{
		transform: rotate(30deg);
		
	}
	.skewTest{
		transform: skew(30deg,20deg);
	}
	.matrixTest{
		transform:matrix(0.866,0.5,-0.5,0.866,0,0);
	}
	</style>
<body>
	<div class="translateTest">translate</div>
	<div class="rotateTest">rotate</div>
	<div class="scaleTest">scale</div>
	<div class="skewTest">skew</div>
	<div class="matrixTest">matrix</div>
	<div>正常</div>
</body>
</html>
